<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="200" style="width: 750rpx; height: 750rpx;">
			<swiper-item>
				<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width: 750rpx; height: 750rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width: 750rpx; height: 750rpx;"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="width: 750rpx; height: 750rpx;"></image>
			</swiper-item>
		</swiper>
		
		
		<view style="background-color: #f0f0f0;">
			
			<view style="height: 20rpx; background-color: #f0f0f0;"></view>
			<view class="flex align-center justify-center" style="width:750rpx">
				<view class="flex flex-column" style="width: 710rpx; border-radius: 20rpx; background-color: white; padding-left: 15rpx;">
					<view class="flex" @click="openLive(centerInfo.id)">
						<view class="p">
							<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="margin-left: 15rpx; margin-top: 15rpx; width:75rpx;height:75rpx; background-color: white;" class="rounded-circle"></image>
						</view>
						<text style="margin-left: 20rpx; margin-top: 20rpx; font-size: 45rpx; font-weight: bold;">{{centerInfo.stationName}}</text>
						<view v-if="centerInfo.livestreamStatus === 1" class="rounded-circle flex align-center justify-center" style="margin-left: 20rpx; margin-top: 40rpx; background-color: rgba(0,0,0,0.4); width: 130rpx; height: 40rpx;">
						<text style="width: 20rpx; height: 20rpx;" class="rounded-circle mr-1 bg-danger">
							</text><text class="text-white font-sm">直播中</text>
						</view>
					</view>
					
					<view class="flex">
						<image src="https://www.dogeman.studio/public/uploads/static/functions/location.png" style="margin-left: 15rpx;  margin-top:5rpx; width:40rpx;height:40rpx; background-color: white;" class="rounded-circle"></image>
						<text style="font-size: 30rpx;">{{centerInfo.specificLocation}}</text>
						<image src="https://www.dogeman.studio/public/uploads/static/functions/contact.png" style="margin-left: 25rpx;  margin-top:5rpx; width:40rpx;height:40rpx;  background-color: white;" class="rounded-circle"></image>
						<text style="font-size: 30rpx;">{{centerInfo.officialPhone}}</text>
					</view>
					
					<view class="flex align-center" style="margin-left: 25rpx;">
					<view v-if="centerInfo.catNum > 0" class="flex align-center justify-center pl-1 pr-1 my-2" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
						<text style="font-size: 27rpx; color: white; font-weight: bold;">猫</text>
					</view>
					<view v-if="centerInfo.dogNum > 0" class="flex align-center justify-center pl-1 pr-1 my-2" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
						<text style="font-size: 27rpx; color: white; font-weight: bold;">狗</text>
					</view>
					<view class="flex align-center justify-center pl-1 pr-1 my-2" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
						<text style="font-size: 27rpx; color: white; font-weight: bold;">共{{centerInfo.catNum+centerInfo.dogNum}}只</text>
					</view>
					</view>
					
					<view class="rounded-circle flex align-center" style="margin-left: 15rpx; margin-top: 15rpx;">
					<text style="color:goldenrod; font-size: 45rpx; font-weight: bold;">“{{centerInfo.briefIntroduction}}”</text>
					</view>
					<view class="flex" style="margin-left: 15rpx; margin-right: 15rpx;">
					<text style="font-size: 30rpx;">{{centerInfo.introduction}}</text>
					</view>
					
					<view class="flex">
						<image src="https://www.dogeman.studio/public/uploads/static/swiper/split_line.png" style="width: 750rpx; height: 75rpx;"></image>
					</view>
					
					
					
				</view>
			</view>
			
			<view style="height: 15rpx; background-color: #f0f0f0;"></view>
			
			<scroll-view scroll-x :scroll-into-view="scrollInto" class="scroll-row" style="height: 100rpx;">
				<view v-for="(item, index) in tabBars" :key="index" 
				class="scroll-row-item px-1 py-2" :id="'tab'+index" :class="tabIndex === index ? 'text-main font-lg font-weight-bold' :'font-weight-bold' " style="margin-left: 15rpx;"
				@click="changeTab(index)">{{item.name}}</view>
			</scroll-view>
			
			<view v-if="tabIndex === 0" class="flex align-center justify-center" style="width:750rpx" :current="tabIndex" @change="onChangeTab">
				<view class="flex" style="width: 710rpx; border-radius: 20rpx; background-color: #f0f0f0;">
					<view v-for="(item, index) in newsList" :key="index">
						<view v-if="item.list.length>0">
						<!-- 列表 -->
						<view v-for="(item2,index2) in item.list" :key="index2">
						<!-- 列表样式 -->
							<common-list2 :item="item2" :index="index2" @follow="follow" @doSupport="doSupport"></common-list2>
							<view style="height: 20rpx; background-color: #f0f0f0; width: 750rpx;"></view>
						</view>
						
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
						</view>
					
					</view>
				</view>
			</view>
			
			<view v-else class="flex align-center justify-center" style="width:750rpx" :current="tabIndex" @change="onChangeTab">
				<view class="flex flex-column" style="width: 710rpx; border-radius: 20rpx; background-color: #f0f0f0;">
					<view v-for="(item, index) in petsList" :key="index" @click="openPet(item.id)">
						<view class="flex" style="background-color: white; border-radius: 20rpx;">
							<image src="https://www.dogeman.studio/public/uploads/static/centers/center-demo.jpg" style="height: 250rpx; width: 250rpx; border-radius: 20rpx; margin-left: 15rpx; margin-top: 15rpx; margin-bottom: 15rpx;"></image>
							
							<view class="flex flex-column">
								<text style="font-weight: bold; font-size: 45rpx; margin-left: 30rpx; margin-top: 15rpx;">{{item.animalName}}</text>
								<text style="margin-left: 30rpx; font-size: 30rpx;">编号: {{item.id}}</text>
								<view class="flex" style="margin-left: 30rpx; margin-top: 35rpx;">
									<view v-if="item.sterilized === 1" class="flex align-center justify-center pl-1 pr-1 my-2" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
										<text style="font-size: 27rpx; color: white; font-weight: bold;">已绝育</text>
									</view>
									
									<view v-if="item.immune === 1" class="flex align-center justify-center pl-1 pr-1 my-2" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
										<text style="font-size: 27rpx; color: white; font-weight: bold;">已免疫</text>
									</view>
									
									<view v-if="item.parasite === 1" class="flex align-center justify-center pl-1 pr-1 my-2" style="border-radius: 15rpx; background-color: chocolate; margin-left: 5rpx; margin-right: 5rpx;">
										<text style="font-size: 27rpx; color: white; font-weight: bold;">已驱虫</text>
									</view>
									
									
								</view>
							</view>
							
						</view>
						<view style="height: 20rpx; background-color: #f0f0f0; width: 750rpx;"></view>
					</view>
				</view>
			</view>
			
			
			<view class="flex align-center justify-center" style="width:750rpx">
				<view class="flex" style="width: 710rpx; border-radius: 20rpx; background-color: white; padding-left: 15rpx;">
					
					
					
				</view>
			</view>
			
			<view style="height: 20rpx; background-color: #f0f0f0;"></view>
			
		</view>

		
	</view>
</template>

<script>
	// const demo = [{
	// 			username: "昵称",
	// 			userpic: "/static/default.jpg",
	// 			newstime: "2023-2-23 13:36",
	// 			isFollow: false,
	// 			title:"标题",
	// 			titlepic:"/static/demo/datapic/11.jpg",
	// 			support:{
	// 				type:"support",
	// 				support_count: 1,
	// 				unsupport_count: 2
	// 			},
	// 			comment_count: 2,
	// 			share_num: 2
	// 			},{
	// 				username: "昵称",
	// 				userpic: "/static/default.jpg",
	// 				newstime: "2023-2-23 13:36",
	// 				isFollow: false,
	// 				title:"标题",
	// 				titlepic:"",
	// 				support:{
	// 					type:"support",
	// 					support_count: 1,
	// 					unsupport_count: 2
	// 				},
	// 				comment_count: 2,
	// 				share_num: 2
	// 			},{
	// 				username: "昵称",
	// 				userpic: "/static/default.jpg",
	// 				newstime: "2023-2-23 13:36",
	// 				isFollow: false,
	// 				title:"标题",
	// 				titlepic:"",
	// 				support:{
	// 					type:"",
	// 					support_count: 1,
	// 					unsupport_count: 2
	// 				},
	// 				comment_count: 2,
	// 				share_num: 2
	// 			}];
	
	import commonList2 from '@/components/common/common-list2.vue';
	import loadMore from '@/components/common/load-more.vue';
	import noThing from '@/components/common/no-thing.vue';
	
	export default {
		components:{
			commonList2,
			loadMore,
			noThing
		},
		data() {
			return {
				// 列表高度
				scrollH: 600,
				// 顶部选项卡
				scrollInto: "",
				tabIndex: 0,
				tabBars: [{
					name:"动态",	
				},{
					name:"待领养"
				}],
				centerInfo: [],
				newsList:[],
				petsList:[]
			}
		},
		onReachBottom(){
			if(this.tabIndex == 0){
				this.loadmore(this.tabIndex);
			}
			
		},
		onLoad(e) {
			uni.getSystemInfo({
				success:res=>{
					this.scrollH = res.windowHeight - uni.upx2px(100)
				}
			})
			this.getData(e.id)
			this.getnewsData(e.id);
			this.getpetsData(e.id);
			// console.log(this.newsList);
		},
		methods: {
			openLive(id){
				uni.navigateTo({
					url: "../live/live?id="+id
				});
			},
			
			getData(id){
				return this.$H.get('/rescue_station/byIdSearchStation/'+id).then(res=>{
					this.centerInfo = res
					console.log(this.centerInfo)
				}).catch(err=>{
				})
			},
			openPet(id){
				uni.navigateTo({
					url: '../pets/pets?id='+id
				})
			},
			getnewsData(id){
				
				this.$H.get('/rescue_station/byStationIdPost/'+id).then(res=>{
					console.log(res);
					
					var arr = []
					for (let i=0; i<this.tabBars.length; i++){
						
						let demo = []
						
						// 生成列表模板
						let obj = {
							// "上拉加载更多", "加载中...", "没有更多了"
							loadmore: "上拉加载更多",
							list: []
						}
						
						if (i<1){
							for (let j=0; j<res.length;j++){
								
								demo.push(
								{
									id: res[j].uii.id,
									user_id: res[j].uii.user_id,
									imgList: res[j].uii.imgList,
									username: res[j].stationName,
									userpic: "https://www.dogeman.studio/public/uploads/static/default.jpg",
									newstime: res[j].uii.updated_time,
									isFollow: false,
									content: res[j].uii.content,
									title: res[j].uii.title,
									titlepic: res[j].uii.titleImg ? res[j].uii.titleImg : "",
									support:{
										type:"support",
										support_count: 1,
										unsupport_count: 2
									},
									comment_count: 2,
									share_num: 2
								})
							}
							console.log(demo)
							obj.list = demo
						}
						arr.push(obj)
					}
					
					this.newsList = arr
					
				}).catch(err=>{
				})
			
			},
			getpetsData(id){
				return this.$H.get('/rescue_station/byStationIdAnimal/'+id).then(res=>{
					this.petsList = res
					// console.log(this.petsList)
				}).catch(err=>{
				})
			},
			onChangeTab(e){
				console.log(e.detail)
				this.changeTab(e.detail.current)
			},
			// 切换选项
			changeTab(index){
				if (this.tabIndex === index){
					return;
				}
				this.tabIndex = index
				// 滚动到指定元素
				this.scrollInto = 'tab'+index
			},
			// 关注
			follow(e){
				this.list[e].isFollow = true
				uni.showToast({ title: '关注成功' })
			},
			//顶踩操作
			doSupport(e){
				// 拿到当前对象
				let item = this.list[e.index]
				let msg = e.type === 'support' ? '顶' : '踩'
				// 判断之前是否已经顶踩
				if (item.support.type === ''){
					this.list[e.index].support.type = e.type
					this.list[e.index].support[e.type+'_count'] ++
					return;
				} else if (item.support.type === 'support' && e.type === "unsupport"){
					item.support.support_count -- 
					item.support.unsupport_count ++ 
				} else if (item.support.type === 'unsupport' && e.type === "support"){
					item.support.support_count ++
					item.support.unsupport_count --
				} 
				item.support.type = e.type
				uni.showToast({
					title: msg + "成功"
				})	
			},
			
			// 上拉加载更多
			loadmore(index){
				let item = this.newsList[index]
				// 判断是否处于可加载状态 (上拉加载更多)
				
				console.log(item.loadmore)
				
				if (item.loadmore !== '上拉加载更多') {
					return;
				}
				
				
				// 修改当前加载状态
				item.loadmore = "加载中..."
				
				// 模拟数据请求
				// setTimeout(()=>{
				// 	item.list = [...item.list,...item.list]
				// 	item.loadmore = "上拉加载更多"
				// }, 2000)
				
				item.loadmore = "没有更多了"
			}
			
		}
	}
</script>

<style>

</style>
